{{! Buttons reuse the Button widget's classes and styles ("requires": ["button"]). }}
<div {{@attrs}}><div class="sv-hero__content">{{#eyebrow}}<p class="sv-hero__eyebrow"{{@edit eyebrow}}>{{eyebrow}}</p>{{/eyebrow}}<{{level}} class="sv-hero__title"{{@edit title}}>{{{title}}}</{{level}}>{{#description}}<p class="sv-hero__description"{{@edit description}}>{{description}}</p>{{/description}}<div class="sv-hero__actions">{{#primaryButton.label}}<div class="sv-button sv-button--variant-{{buttonVariant}} sv-button--size-{{buttonSize}}">{{#primaryButton.link.url}}<a class="sv-button__control{{#primaryButton.arrow}} sv-button__control--arrow{{/primaryButton.arrow}}{{#primaryButton.icon}} sv-button__control--icon{{#primaryButton.iconEnd}} sv-button__control--icon-end{{/primaryButton.iconEnd}} sv-glyph-{{primaryButton.icon}}{{/primaryButton.icon}}" href="{{primaryButton.link.url}}"{{#primaryButton.link.newTab}} target="_blank" rel="noopener noreferrer"{{/primaryButton.link.newTab}}{{@edit primaryButton.label}}>{{primaryButton.label}}</a>{{/primaryButton.link.url}}{{^primaryButton.link.url}}<span class="sv-button__control{{#primaryButton.arrow}} sv-button__control--arrow{{/primaryButton.arrow}}{{#primaryButton.icon}} sv-button__control--icon{{#primaryButton.iconEnd}} sv-button__control--icon-end{{/primaryButton.iconEnd}} sv-glyph-{{primaryButton.icon}}{{/primaryButton.icon}}"{{@edit primaryButton.label}}>{{primaryButton.label}}</span>{{/primaryButton.link.url}}</div>{{/primaryButton.label}}{{#secondaryButton.label}}<div class="sv-button sv-button--variant-{{secondVariant}} sv-button--size-{{buttonSize}}">{{#secondaryButton.link.url}}<a class="sv-button__control{{#secondaryButton.arrow}} sv-button__control--arrow{{/secondaryButton.arrow}}{{#secondaryButton.icon}} sv-button__control--icon{{#secondaryButton.iconEnd}} sv-button__control--icon-end{{/secondaryButton.iconEnd}} sv-glyph-{{secondaryButton.icon}}{{/secondaryButton.icon}}" href="{{secondaryButton.link.url}}"{{#secondaryButton.link.newTab}} target="_blank" rel="noopener noreferrer"{{/secondaryButton.link.newTab}}{{@edit secondaryButton.label}}>{{secondaryButton.label}}</a>{{/secondaryButton.link.url}}{{^secondaryButton.link.url}}<span class="sv-button__control{{#secondaryButton.arrow}} sv-button__control--arrow{{/secondaryButton.arrow}}{{#secondaryButton.icon}} sv-button__control--icon{{#secondaryButton.iconEnd}} sv-button__control--icon-end{{/secondaryButton.iconEnd}} sv-glyph-{{secondaryButton.icon}}{{/secondaryButton.icon}}"{{@edit secondaryButton.label}}>{{secondaryButton.label}}</span>{{/secondaryButton.link.url}}</div>{{/secondaryButton.label}}</div></div>{{#image.url}}<div class="sv-hero__media"><img class="sv-hero__img wp-image-{{image.id}}" src="{{image.url}}" alt="{{image.alt}}"{{#image.width}} width="{{image.width}}" height="{{image.height}}"{{/image.width}} fetchpriority="high" decoding="async"></div>{{/image.url}}{{^image.url}}{{#beside}}{{@placeholder image}}{{/beside}}{{/image.url}}</div>